<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="./iconfont/iconfont.css"
    />
    <link
      rel="stylesheet"
      href="./css/base.css"
    />
    <link
      rel="stylesheet"
      href="./css/index.css"
    />
    <style></style>
  </head>
  <body>
    <!-- 顶部通栏 -->
    <div
      class="top-nav"
      id="top"
    >
      <!-- 版心 -->
      <div class="w clear-float">
        <!-- 左边的盒子 -->
        <ul class="top-left fl clear-float">
          <!-- 地址 -->
          <li class="location select-container fl">
            <!-- 做边框的盒子 -->
            <div class="select-border">
              <i class="iconfont icon-dizhi"></i>
              湖北
            </div>
            <!-- 做下拉框的盒子 -->
            <div class="select-content"></div>
          </li>
          <li class="toggle fl">切换至企业版</li>
        </ul>
        <!-- 右边的盒子 -->
        <ul class="top-right fr clear-float">
          <li class="user fl">
            <span>你好，请登录</span>
            <span class="resigen active">免费注册</span>
          </li>
          <li class="fl">我的订单</li>
          <li class="select-container fl menu">
            <div class="select-border">
              我的京东
              <div class="icon-box"><i class="iconfont icon-xiangxiajiantou"></i></div>
            </div>
            <div class="select-content"></div>
          </li>
          <li class="select-container fl menu">
            <div class="select-border active">
              企业采购
              <div class="icon-box"><i class="iconfont icon-xiangxiajiantou"></i></div>
            </div>
            <div class="select-content"></div>
          </li>
          <li class="select-container fl menu">
            <div class="select-border">
              商家服务
              <div class="icon-box"><i class="iconfont icon-xiangxiajiantou"></i></div>
            </div>
            <div class="select-content"></div>
          </li>
          <li class="select-container fl menu">
            <div class="select-border">
              网站导航
              <div class="icon-box"><i class="iconfont icon-xiangxiajiantou"></i></div>
            </div>
            <div class="select-content"></div>
          </li>
          <li class="fl">手机京东</li>
          <li class="fl">网站无障碍</li>
        </ul>
      </div>
    </div>

    <!-- 搜索栏 -->
    <div class="search-container">
      <div class="w clear-float">
        <div class="logo fl">
          <a href="./index.html"></a>
        </div>
        <div class="serach fl">
          <div class="search-car">
            <!-- 输入框和购物车区域 -->
            <div class="search-box clear-float">
              <!-- 搜索框 -->
              <div class="search-ipt clear-float fl">
                <input
                  type="text"
                  name=""
                  id=""
                  placeholder="京东"
                  class="fl"
                />
                <i class="iconfont icon-xiangji"></i>
                <button class="fl">
                  <i class="iconfont icon-sousuo"></i>
                </button>
              </div>
              <!-- 购物车 -->
              <div class="car fl">
                <i class="iconfont icon-gouwuche">
                  <span>0</span>
                </i>
                <span>我的购物车</span>
                <div class="car-select"></div>
              </div>
            </div>
            <!-- 搜索列表 -->
            <ul class="search-nav clear-float">
              <li class="fl">汽车超级省</li>
              <li class="fl">5折抢购</li>
              <li class="fl">鞋靴会场</li>
              <li class="fl">箱包服配</li>
              <li class="fl">荣耀会场</li>
              <li class="fl">京东房产</li>
              <li class="fl">手机好店</li>
              <li class="fl">可口可乐</li>
              <li class="fl">拍拍二手</li>
            </ul>
          </div>
          <!-- 商品导航 -->
          <ul class="goods-nav clear-float">
            <li class="fl">京东超市</li>
            <li class="fl">京东生鲜</li>
            <li class="fl">秒杀</li>
            <li class="fl">京东家电</li>
            <li class="fl">电脑数码</li>
            <li class="fl">PLUS会员</li>
            <li class="fl">进口好物</li>
            <li class="fl">便宜包邮</li>
            <li class="fl">拍卖</li>
            <li class="fl">京东五金城</li>
          </ul>
        </div>
        <div class="shuang11 fr">
          <a href="#"></a>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <div class="w">
        <!-- 菜单 -->
        <div class="goods-menu clear-float">
          <ul class="menu fl">
            <li>家用电器</li>
            <li>手机/运营商/数码</li>
            <li>电脑/办公</li>
            <li>家居/家具/家装/厨具</li>
            <li>男装/女装/童装/内衣</li>
            <li>美妆/个护清洁/宠物</li>
            <li>女鞋/箱包/钟表/珠宝</li>
            <li>男鞋/运动/户外</li>
            <li>房产/汽车/汽车用品</li>
            <li>母婴/玩具乐器</li>
            <li>食品/酒类/生鲜/特产</li>
            <li>艺术/礼品鲜花/农牧园艺</li>
            <li>医药保健/计生情趣</li>
            <li>图书/文娱/教育/电子书</li>
            <li>机票/酒店/旅游/生活</li>
            <li>支付/白条/保险/企业金融</li>
            <li>安装/维修/清洗/二手</li>
            <li>五金机电/元器件</li>
          </ul>
          <div class="swiper fl">
            <img
              src="https://img12.360buyimg.com/babel/s590x470_jfs/t20261030/238287/30/1240/103288/6540ef7dF3d50eae2/47d7f74c21fdac5b.png.avif"
              alt=""
            />
          </div>
          <div class="table-swipei fl">
            <img
              src="./images/table-swiper.png"
              alt=""
            />
          </div>
          <div class="user fl">
            <div class="portraiture"></div>
            <p class="welcome">Hi~欢迎逛京东！</p>
            <div class="vip plus">
              <div class="clear-float">
                <p class="grade fl">Plus会员</p>
                <p class="fr">立即开通<i class="iconfont icon-xiangyoujiantou"></i></p>
              </div>
              <p>最高3%返利</p>
            </div>
            <div class="vip">
              <div class="clear-float">
                <p class="grade fl">普通会员</p>
                <p class="fr">立即开通<i class="iconfont icon-xiangyoujiantou"></i></p>
              </div>
              <p>新人采购立省1240元</p>
            </div>
            <div class="grid-icon">
              <img
                src="./images/grid.png"
                alt=""
              />
            </div>
            <p class="information">
              <strong>资讯</strong>
              <span>刘文强：我国工业绿色发展取得七个方面重大成就</span>
            </p>
          </div>
        </div>

        <!-- 秒杀区域 -->
        <div
          class="flash"
          id="flash"
        >
          <img
            src="./images/timer-swiper.png"
            alt=""
          />
        </div>

        <!-- 逛一逛区域 -->
        <ul
          class="stroll clear-float"
          id="stroll"
        >
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
          <li class="fl">
            <img
              src="./images/item.png"
              alt=""
            />
          </li>
        </ul>

        <!-- 频道区域 -->
        <div
          class="channel"
          id="channel"
        >
          <h1 class="title">频道广场</h1>
          <ul class="channel-content clear-float">
            <li class="large">
              <img
                src="./images/large.png"
                alt=""
              />
            </li>
            <li class="large">
              <img
                src="./images/large.png"
                alt=""
              />
            </li>
            <li class="small clear-float">
              <div class="fl">
                <h1>京东工品购</h1>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
              <div class="fl">
                <p>PLUS专享福利</p>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
            </li>
            <li class="small clear-float">
              <div class="fl">
                <h1>京东工品购</h1>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
              <div class="fl">
                <p>PLUS专享福利</p>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
            </li>
            <li class="small clear-float">
              <div class="fl">
                <h1>京东工品购</h1>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
              <div class="fl">
                <p>PLUS专享福利</p>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
            </li>
            <li class="small clear-float">
              <div class="fl">
                <h1>京东工品购</h1>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
              <div class="fl">
                <p>PLUS专享福利</p>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
            </li>
            <li class="small clear-float">
              <div class="fl">
                <h1>京东工品购</h1>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
              <div class="fl">
                <p>PLUS专享福利</p>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
            </li>
            <li class="small clear-float">
              <div class="fl">
                <h1>京东工品购</h1>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
              <div class="fl">
                <p>PLUS专享福利</p>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
            </li>
            <li class="small clear-float">
              <div class="fl">
                <h1>京东工品购</h1>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
              <div class="fl">
                <p>PLUS专享福利</p>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
            </li>
            <li class="small clear-float">
              <div class="fl">
                <h1>京东工品购</h1>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
              <div class="fl">
                <p>PLUS专享福利</p>
                <img
                  src="https://img14.360buyimg.com/img/s100x100_jfs/t1/236293/16/1917/80056/6548a393Fb6e25520/59af73e10aaca0b8.jpg!cc_100x100.avif"
                  alt=""
                />
              </div>
            </li>
          </ul>
        </div>

        <div
          class="recommend"
          id="recommend"
        >
          <h1 class="title">为你推荐</h1>
          <div class="recommend-content"></div>
        </div>
      </div>
    </div>

    <!-- 电梯导航 -->
    <ul class="lift">
      <li><a href="#flash">京东秒杀</a></li>
      <li><a href="#stroll"></a></li>
      <li><a href="#channel">频道广场</a></li>
      <li><a href="#recommend">为你推荐</a></li>
      <li>
        <a href="#top">
          <p class="iconfont icon-xiangxiajiantou"></p>
          <p>顶部</p>
        </a>
      </li>
    </ul>
  </body>
</html>
